<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
			<greet @greet-event="sayHello"></greet>
		</div>

		<script>
			var app = Vue.createApp({
				data() {
					return {
						"message": "Hello Vue!"
					}
				},
				methods: {
					sayHello: function(name) {
						alert("你好!" + name)
					}
				}
			});

			app.component('greet', {
				template: "<input type='text' v-model='name'/><button @click='doClick'>设置</button>",
				methods: {
					data() {
						return {
							name: ""
						}
					},
					doClick: function() {
						console.log("doClick()")
						this.$emit("greetEvent", this.name)
					}
				},
				// emits:['greetEvent']
				emits: {
					// 提交事件
					// return false 没有起作用 ???
					greetEvent: (name) => {
						if (name) {
							return true
						} else {
							alert('Please input name')
							return false
						}
					}

					// function(name)
					// {
					// 	console.log("进行验证");
					// 	if(name)
					// 	{
					// 		return true;
					// 	}
					// 	else
					// 	{
					// 		alert("请输入姓名");
					// 		return false;
					// 	}						
					// }
				}

			})

			var vm = app.mount("#app")
		</script>



	</body>
</html>
